<template>
  <el-pagination class="my-pagination" v-bind="options" v-if="options.total != 0" :current-page="currentPage"
    :page-size="pageSize" :layout="pageLayout" :pager-count="pagerCount" @update:current-page="setPage"
    @update:page-size="setSize"></el-pagination>
</template>
<script>
import { ElPagination } from 'element-plus';
import { defineComponent,computed,ref,watch } from 'vue';
export default defineComponent({
  name: 'Pagination',
  props: {
    options: {
      type: Object,
      required: true,
    },
  },
  setup(props) {

    const pageLayout = computed(() =>
      ' prev, pager, next, sizes, jumper,  ->, total',
    );
    const pagerCount = computed(() =>
      !props.options?.noAutoLayout ? 5 : props.options?.pagerCount,
    );
    // console.log('props',props.options,pageLayout,pagerCount,!props.options?.noAutoLayout && globalStore.isMobile);

    const currentPage = ref(1);
    watch(
      () => props.options?.currentPage,
      (page) => {
        currentPage.value = page;
      },
      { immediate: true },
    );
    const setPage = (page) => {
      currentPage.value = page;
      props.options?.change(currentPage.value, pageSize.value);
    };
    const pageSize = ref(10);
    watch(
      () => props.options?.pageSize,
      (size) => {
        pageSize.value = size;
      },
      { immediate: true },
    );
    const setSize = (size) => {
      pageSize.value = size;
      props.options?.change(currentPage.value, pageSize.value);
    };
    return {
      pageLayout,
      pagerCount,
      currentPage,
      pageSize,
      setPage,
      setSize,
    };
  },
});
</script>
<style>
.el-pagination {
  margin-top: 10px !important;
}
</style>